import React, { useRef, useState } from 'react'
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Box, Typography } from '@material-ui/core';
import { VideoPlay } from 'components/videoPlay';
import { useSelector } from 'react-redux';
import ReactPlayer from "react-player";
import { Image } from 'components/atoms';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        height: "calc(50vh - 64px)",
        padding: "0 10%",
        background: "linear-gradient(150deg, rgb(10, 10, 10, 0.60) 30%, rgb(30, 30, 30, 0.20) 50%, rgb(10, 10, 10, 0.60) 70%)",
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: "column",
        overflow: "hidden",
        position: "relative",
        [theme.breakpoints.up('sm')]: {
            height: "calc(70vh - 64px)",
        },
        [theme.breakpoints.up('md')]: {
            height: "calc(100vh - 64px)",
        },
    },
    typography: {
        textAlign: "center",
        textShadow: "5px 5px 0px rgba(255, 255, 255, 0.3)",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "30px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "rgba(255, 255, 255, 0)",
        textStroke: "1px #fff",
        [theme.breakpoints.up('md')]: {
            fontSize: "50px",
        },
    },
    typography1: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "32px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "rgba(255, 255, 255, 1)",
        [theme.breakpoints.up('md')]: {
            fontSize: "80px",
        },
        [theme.breakpoints.up('lg')]: {
            fontSize: "110px",
        },
    },
    musicPlay: {
        position: "absolute",
        left: 0,
        right: 0,
        bottom: "20px",
        margin: "0 auto",
        padding: "0 10px",
        zIndex: 10,
        [theme.breakpoints.up('sm')]: {
            padding: "0 10%",
            bottom: "40px",
        },
    },
    pagePaddingTop: {
        padding: theme.spacing(3),
        paddingBottom: theme.spacing(3),
        [theme.breakpoints.up('md')]: {
            paddingTop: theme.spacing(5),
            paddingBottom: theme.spacing(5),
        },
    },
    sectionAlternate: {
        '& .section-alternate__content': {
            padding: theme.spacing(3),
            paddingBottom: theme.spacing(3),
            [theme.breakpoints.up('md')]: {
                paddingTop: theme.spacing(5),
                paddingBottom: theme.spacing(5),
            },
        },
    },
    image: {
        objectFit: 'cover',
        borderRadius: theme.spacing(0, 0, 20, 0),
    },
    blogContent: {
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
    },
    list: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    adsVideo: {
        position: "absolute",
        top: "0",
        left: "0",
        width: '100%',
        height: '100%',
        zIndex: 5,
        background: "#000"
    },
}));

const Banner = () => {

    const classes = useStyles();
    const theme = useTheme()
    // console.log(theme)

    const [isPlay, setIsPlay] = useState(true)
    const [playing, setPlaying] = useState(true)
    const [playedSeconds, setPlayedSeconds] = useState(null)
    const [volume, setVolume] = useState(1)
    const [playDuration, setPlayDuration] = useState(false)
    const [muted, setMuted] = useState(true)

    const adsPlayer = useRef()

    const steam_video = useSelector((state) => state.cover.steam_video.community);
    const adsProgress = (played) => {
        setPlayedSeconds(played.playedSeconds)
    }
    const adsDuration = (played) => {
        setPlayDuration(played)
    }

    const adsEnded = () => {
        setIsPlay(!isPlay)
    }

    const adsClickPreview = () => {
        setPlaying(true)
        setIsPlay(true)
    }

    const adsProp = {
        playedSeconds: playedSeconds,
        playDuration: playDuration,
        isPlay: isPlay,
        setIsPlay,
        setVolume,
        setMuted,
        adsPlayer,
    }

    return (
        <div className={classes.root}>
            <Typography className={classes.typography1}>
                {steam_video?.index_community_title}
            </Typography>
            <Typography className={classes.typography}>
                {steam_video?.index_community_sub_title}
            </Typography>

            <div className={classes.adsVideo}>
                <ReactPlayer
                    ref={adsPlayer}
                    playing={isPlay}
                    volume={volume}
                    url={steam_video?.index_community_video}
                    playsinline
                    muted={muted}
                    controls={false}
                    loop
                    // light={
                    //     <Image
                    //         src={steam_video?.index_community_image}
                    //         alt={steam_video?.index_community_image}
                    //         lazyProps={{ width: '100%', height: '100%' }}
                    //     />}
                    onProgress={adsProgress}
                    onDuration={adsDuration}
                    onEnded={adsEnded}
                    onClickPreview={adsClickPreview}
                    width={"100%"}
                    height={"100%"}
                />
                <Box className={classes.musicPlay} style={{ opacity: playing ? 1 : 0 }}>
                    <VideoPlay {...adsProp} />
                </Box>
            </div>

        </div>
    )
}


Banner.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default Banner
